<template>
    <div class="home">
        <div class="home_top">
            <div class="header">
                <div class="header_map">
                    <img src="../assets/images/nb_coin.png" alt="">
                    <router-link to="/location">
                        <img v-if="!cityName" src="../assets/images/go_ld.png" alt="">
                        <span class="cityName" v-else>{{cityName}}</span>
                    </router-link>
                    
                </div>
                <div class="header_search">
                    <a href="">
                        <i class="iconfont icon-sousuo"></i>
                        <span class="search_sp">搜索商品或品牌</span>
                    </a>
                </div>
            </div>
            <div class="nav">
                <router-link class="nav_item active" to="/">热门活动</router-link>
                <router-link class="nav_item" to="/cate">品类精选</router-link>
            </div>
        </div>
        <div class="footer_box">
            <div class="banner_icon">
                <div class="swiper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index)
                             in getBannerImg" :key="index">
                             <img :src="item.ItemImagePath" alt="">
                             </div>
                        </div>
                    </div> 
                </div>
                <ul class="icon_ul">
                    <li v-for="(item,index) in getIconImg" :key="index">
                        <img :src="item.ItemImagePath" alt="">
                        <p>{{item.ItemName}}</p>
                    </li>
                </ul>
            </div>
            <div class="model_box">
                <div class="model_list" v-for="(item,index) in getModelList[2]" :key="'info-'+index">
                    <img :src="item.ItemImagePath" alt="">
                </div>
                <div class="model_list">
                    <div class="ad-layout">
                        <div class="adv01" v-for="(item,index) in getModelList[3]" :key="index">
                            <a href="">
                                <img :src="item.ItemImagePath" alt="">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="model_list" v-for="(item,index) in getModelList[4]" :key="index">
                    <img :src="item.ItemImagePath" alt="">
                </div>
                <div class="model_list">
                    <div class="img_box">
                        <div class="img_content" v-for="(item,index) in getModelList[5]" :key="index">
                            <img :src="item.ItemImagePath" alt="">
                        </div>
                    </div>
                </div>
                <div class="model_list" v-for="(item,index) in getModelList[6]" :key="'hot-'+index">
                    <img :src="item.ItemImagePath" alt="">
                </div>
                <div class="model_list">
                    <ul class="goods_list">
                        <li class="goods_box" v-for="(item,index) in getModelList[7]" :key="index">
                            <img :src="item.ItemImagePath" alt="">
                            <p>{{item.ItemName}}</p>
                            <div class="goods_price">
                                <span class="now_price">￥{{item.NowPrice}}.00</span>
                                <span class="old_price">￥{{item.OldPrice}}.00</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import {getHomeList} from '../api/getgoods.js'
import Swiper from '../utils/swiper-bundle.min.js'
    export default {
        data(){
            return{
                home_datas:[],
                cityName:null
            }
        },
        created(){
            this.cityName=this.$store.state.citySelect.cityName
            getHomeList().then(res=>{
                res.data.forEach(item=>{
                    item.ChildSectionItems.forEach(ite=>{
                        this.home_datas.push(ite.MallSectionItemList)
                    })
                })
            })
        },
        computed: {
            getIconImg() {//获取首页数据中的酒类图标
                return this.home_datas[1]
            },
            getBannerImg(){//获取轮播图图片
                return this.home_datas[0]
            },
            getModelList(){
                return this.home_datas
            }
        },
        mounted () {
            new Swiper('.swiper-container',{
                loop:true,
                // direction : 'vertical'
            })
        },
    }
</script>
<style lang="css" src="../assets/css/swiper-bundle.min.css" scoped></style>
<style lang="css" src="../assets/css/home.css" scoped>
</style>
<style lang="sass" scoped>
</style>